/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    --mod-buttongroup-justify-content: flex-end;
    --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width);
    --mod-popover-corner-radius: var(--spectrum-coachmark-popover-corner-radius);
    --mod-popover-content-area-spacing-vertical: 0;
    --mod-button-edge-to-visual-only: 9px;
    --spectrum-coachmark-border-size: var(--mod-popover-border-width);
    --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
    min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width));
    max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width));
    inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width));
    position: relative;
}

.buttongroup {
    display: var(--spectrum-coachmark-buttongroup-display);
}

.buttongroup-mobile {
    --mod-buttongroup-spacing-horizontal: var(--spectrum-coachmark-buttongroup-spacing-horizontal);
    display: var(--spectrum-coachmark-buttongroup-mobile-display);
}

.menu {
    display: var(--spectrum-coachmark-menu-display);
}

.spectrum-CoachMark-menu--mobile {
    display: var(--spectrum-coachmark-menu-mobile-display);
}

.image-wrapper {
    block-size: var(--mod-coachmark-media-height, var(--spectrum-coachmark-media-height));
    min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height));
    inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) * 2);
    object-fit: cover;
    object-position: center;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
}

.image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-start-start-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)));
    border-start-end-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)));
    display: block;
}

.content,
.footer,
.header {
    padding-block: 0;
    padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
}

.header {
    justify-content: space-between;
    align-items: center;
    margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
    padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
    display: flex;
}

.action-menu {
    white-space: nowrap;
    z-index: 1;
    margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-coachmark-heading-to-action-button));
}

.content {
    color: var(--mod-coachmark-content-font-color, var(--spectrum-coachmark-content-font-color));
    font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size));
    font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight));
    font-family: var(--mod-coachmark-content-font-family, var(--spectrum-coachmark-content-font-family));
    font-style: var(--mod-coachmark-content-font-style, var(--spectrum-coachmark-content-font-style));
    line-height: var(--mod-coachmark-content-line-height, var(--spectrum-coachmark-content-line-height));
    margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer));
}

.footer {
    align-items: end;
    margin-block-start: 0;
    padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
    display: grid;
}

.footer .spectrum-ButtonGroup {
    grid-column-start: 2;
}

.title {
    color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color));
    font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coachmark-title-font-size));
    font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight));
    font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family));
    font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style));
    line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height));
    margin-block-end: 0;
}

.step {
    color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color));
    font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size));
    font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight));
    font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style));
    line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height));
    white-space: nowrap;
    justify-self: start;
    margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));
}
